<script lang="ts" setup>
import type { VbenFormProps } from '#/adapter/form'
import type { VxeGridProps } from '#/adapter/vxe-table'
import TableAction from '#/components/TableAction/index.vue'
import { useImportModal } from '#/hooks/useImportModal'
import { usePagePermission } from '#/hooks/usePermission'
import { useTableCURD } from '#/hooks/useTableList'
import { Page } from '@vben/common-ui'
import { $t } from '@vben/locales'
import { Button, Switch } from 'ant-design-vue'
import AddEditModal from './components/AddEditModal.vue'
import { columns, formSchema } from './data/table'
import { useResetPsw } from './use'
import type { TableListItem } from './use/api'
import { PageApi } from './use/api'
import { PAGE_AUTH_CODE_PREFIX } from './use/config'

const formOptions: VbenFormProps = {
    schema: formSchema
}

const gridOptions: VxeGridProps<any> = {
    columns,
    proxyConfig: {
        ajax: {
            query: async ({ page }, formValues) => {
                const res = await PageApi.getPageList({
                    ...formValues,
                    limit: page.pageSize,
                    page: page.currentPage
                })
                return {
                    items: res.records,
                    total: res.total
                }
            }
        }
    }
}

/**
 * 表格配置
 */
const {
    Grid,
    GridApi,
    FormModal,
    add: handleCreate,
    edit: handleEdit,
    del: handleDelete,
    handleSuccess,
    updateStatus,
    delBatch: handleDeleteBatch
} = useTableCURD<TableListItem>({
    formOptions,
    gridOptions,
    modalOptions: {
        connectedComponent: AddEditModal
    },
    updateStatusApi: PageApi.updateStatus,
    delApi: PageApi.delete
})

// 权限配置
const { getPagePermissionKey, hasPagePermission } = usePagePermission(PAGE_AUTH_CODE_PREFIX)
// 重置密码
const { reset: handleResetPsw } = useResetPsw()
function handleCreateFix() {
    handleCreate({
        treeData: GridApi.grid.getTableData().tableData
    })
}

/**
 * table 操作
 * @param record
 */
function getActions(record: TableListItem) {
    const arr: any[] = [
        {
            icon: 'clarity:note-edit-line',
            tooltip: $t('common.edit'),
            onClick: () => {
                handleEdit(record)
            },
            auth: getPagePermissionKey('edit')
        },
        {
            icon: 'ant-design:delete-outlined',
            color: '#bb1b1b',
            tooltip: $t('common.delete'),
            popConfirm: {
                title: $t('page.system.children.user.children.deleteConfirm'),
                placement: 'left',
                onConfirm: () => {
                    handleDelete(record)
                }
            },
            auth: getPagePermissionKey('delete')
        },
        {
            icon: 'fluent:key-reset-24-regular',
            tooltip: $t('page.system.children.user.children.resetPwd'),
            auth: getPagePermissionKey('resetPwd'),
            popConfirm: {
                title: $t('page.system.children.user.children.resetPwdConfirm'),
                placement: 'left',
                onConfirm: () => {
                    handleResetPsw(record)
                }
            }
        }
    ]

    return arr
}

const { openImportModal, ImportModal } = useImportModal({
    api: upload,
    templateName: '用户导入模板',
    templateUrl:
        'https://gz-cdn-1329519101.cos.ap-guangzhou.myqcloud.com/2024/luoyi-zhiyou/test/config/app.json',
    title: '用户导入'
})

async function upload(data: any) {
    console.log(data, 'upload')
    await new Promise((resolve) => {
        setTimeout(() => {
            resolve(true)
        }, 2000)
    })
    return true
}
</script>

<template>
    <Page auto-content-height>
        <Grid>
            <template #toolbar-tools>
                <view class="flex gap-2">
                    <Button @click="openImportModal()">
                        {{ $t('common.import') }}
                    </Button>
                    <Button v-if="hasPagePermission('add')" type="primary" @click="handleCreateFix">
                        {{ $t('page.system.children.user.children.add') }}
                    </Button>
                    <Button
                        v-if="hasPagePermission('delete')"
                        danger
                        type="primary"
                        @click="handleDeleteBatch"
                    >
                        {{ $t('page.system.children.user.children.delete') }}
                    </Button>
                </view>
            </template>
            <template #status="{ row }">
                <Switch
                    :checked="row.status"
                    :checked-value="1"
                    :un-checked-value="2"
                    :checked-children="$t('options.status.children.normal')"
                    :un-checked-children="$t('options.status.children.disabled')"
                    @change="updateStatus($event as number, row as TableListItem)"
                />
            </template>
            <template #action="{ row }">
                <TableAction :actions="getActions(row)" />
            </template>
        </Grid>
        <FormModal @success="handleSuccess" />
        <ImportModal />
    </Page>
</template>
